<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="styles/layout.css" type="text/css" />
<!-- -->
<script type="text/javascript" src="scripts/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="scripts/jquery.slidepanel.setup.js"></script>
<script type="text/javascript" src="scripts/jquery.cycle.all.js"></script>
<script type="text/javascript" src="scripts/jquery.cycle.setup.js"></script>
<title>漂书系统</title>
</head>

<body>
	<!-- 登录部分 -->
	<div class="wrapper col0">
		<div id="topbar">
			<div id="slidepanel">
				<div class="topbox"></div>
				<div class="topbox">
					<h2>登录面板</h2>
					<form action="#" method="post">
						<fieldset>
							<legend>Login Form</legend>
							<label for="username">用户名: <input type="text"
								name="username" id="username" value="" />
							</label> <label for="password">密码: <input type="password"
								name="password" id="password" value="" />
							</label> <label for="remember"> <input class="checkbox"
								type="checkbox" name="remember" id="remember" checked="checked" />
								记住登录信息<span id="register"><a href="#">新用户注册</a></span></label> <input
								type="submit" name="login" id="login" value="登录" /> &nbsp; <input
								type="reset" name="reset" id="reset" value="重置" />
							</p>
						</fieldset>
					</form>
				</div>
				<br class="clear" />
			</div>
			<div id="loginpanel">
				<ul>
					<li class="left">登录面板 &raquo;</li>
					<li class="right" id="toggle"><a id="slideit"
						href="#slidepanel">打开面板</a><a id="closeit" style="display: none;"
						href="#slidepanel">关闭面板</a></li>
				</ul>
			</div>
			<div id="userinfopanel" style="display: none;">
				<ul>
					<li class="left">你好，XXX</li>
					<li class="center"><a href="#">我的信息</a></li>
					<li class="right"><a href="#">注销登录</a></li>
				</ul>
			</div>
			<div id="change">
				<a href="#change">登陆后</a><a href="#change" style="display: none;">未登录</a>
			</div>
			<br class="clear" />
		</div>
	</div>
	<!--
########################################################################################## -->
	<div class="wrapper col1">
		<div id="header">
			<div id="logo">
				<a href="#"><img id="logoimg" src="images/logo_slat.jpg" /></a>
				<!--<p>漂书系统</p>-->
			</div>
			<div id="topnav">
				<ul>
					<li class="active"><a href="#">首页</a></li>
					<li><a href="#">漂书</a></li>
					<li><a href="#">搜索</a></li>
					<li class="last"><a href="#">捐书</a></li>
				</ul>
			</div>
			<br class="clear" />
		</div>
	</div>
	<!--
########################################################################################## -->
	<div class="wrapper col2">
		<div id="featured_slide">
			<div class="featured_box">
				<a href="#"><img src="images/cover/s11109674.jpg" alt=""
					width="211" height="300" /></a>
				<div class="floater">
					<h2>《天鹅·余辉》</h2>
					<ul>
						<li>作者：XXX</li>
						<li>出版社：XXX</li>
						<li>已飘人数：XXX</li>
						<li>待飘人数：XXX</li>
						<li>简介：
							<p>漂书是将自己拥有却不再阅读的书籍，无偿提供给其他书友阅读,书友阅读完后又将书传给下一位书友,这种传递方式类似漂流瓶的供书友无偿传阅的书籍,就是漂书。而参与漂书的人就叫漂书人。</p>
						</li>
					</ul>
					<p class="readmore">
						<a href="#">借阅此书 &raquo;&raquo;</a>
					</p>
				</div>
			</div>
			<div class="featured_box">
				<a href="#"><img src="images/cover/s11157611.jpg" alt="" /></a>
				<div class="floater">
					<h2>《追日》</h2>
					<ul>
						<li>作者：XXX</li>
						<li>出版社：XXX</li>
						<li>已飘人数：XXX</li>
						<li>待飘人数：XXX</li>
						<li>简介：
							<p>漂书是将自己拥有却不再阅读的书籍，无偿提供给其他书友阅读,书友阅读完后又将书传给下一位书友,这种传递方式类似漂流瓶的供书友无偿传阅的书籍,就是漂书。而参与漂书的人就叫漂书人。</p>
						</li>
					</ul>
					<p class="readmore">
						<a href="#">借阅此书 &raquo;&raquo;</a>
					</p>
				</div>
			</div>
			<div class="featured_box">
				<a href="#"><img src="images/cover/s11168708.jpg" alt="" /></a>
				<div class="floater">
					<h2>《给理想一点时间II》</h2>
					<ul>
						<li>作者：XXX</li>
						<li>出版社：XXX</li>
						<li>已飘人数：XXX</li>
						<li>待飘人数：XXX</li>
						<li>简介：
							<p>漂书是将自己拥有却不再阅读的书籍，无偿提供给其他书友阅读,书友阅读完后又将书传给下一位书友,这种传递方式类似漂流瓶的供书友无偿传阅的书籍,就是漂书。而参与漂书的人就叫漂书人。</p>
						</li>
					</ul>
					<p class="readmore">
						<a href="#">借阅此书 &raquo;&raquo;</a>
					</p>
				</div>
			</div>
			<div class="featured_box">
				<a href="#"><img src="images/cover/s11169787.jpg" alt="" /></a>
				<div class="floater">
					<h2>《陈春天》</h2>
					<ul>
						<li>作者：XXX</li>
						<li>出版社：XXX</li>
						<li>已飘人数：XXX</li>
						<li>待飘人数：XXX</li>
						<li>简介：
							<p>漂书是将自己拥有却不再阅读的书籍，无偿提供给其他书友阅读,书友阅读完后又将书传给下一位书友,这种传递方式类似漂流瓶的供书友无偿传阅的书籍,就是漂书。而参与漂书的人就叫漂书人。</p>
						</li>
					</ul>
					<p class="readmore">
						<a href="#">借阅此书 &raquo;&raquo;</a>
					</p>
				</div>
			</div>
			<div class="featured_box">
				<a href="#"><img src="images/cover/s11169989.jpg" alt="" /></a>
				<div class="floater">
					<h2>《将嫁》</h2>
					<ul>
						<li>作者：XXX</li>
						<li>出版社：XXX</li>
						<li>已飘人数：XXX</li>
						<li>待飘人数：XXX</li>
						<li>简介：
							<p>漂书是将自己拥有却不再阅读的书籍，无偿提供给其他书友阅读,书友阅读完后又将书传给下一位书友,这种传递方式类似漂流瓶的供书友无偿传阅的书籍,就是漂书。而参与漂书的人就叫漂书人。</p>
						</li>
					</ul>
					<p class="readmore">
						<a href="#">借阅此书 &raquo;&raquo;</a>
					</p>
				</div>
			</div>
		</div>
		<div id="fsn">
			<ul id="fs_pagination">
			</ul>
		</div>
	</div>
	<!--
########################################################################################## -->
	<div class="wrapper col3">
		<div id="homecontent">
			<div class="column2">
				<h2>什么是漂书</h2>
				<img class="imgl" src="images/number/1.jpg" alt="" />
				<p>漂书是将自己拥有却不再阅读的书籍，无偿提供给其他书友阅读,书友阅读完后又将书传给下一位书友,这种传递方式类似漂流瓶的供书友无偿传阅的书籍,就是漂书。而参与漂书的人就叫漂书人。</p>
				<h6>漂书的起源</h6>
				<p>漂书起源于20世纪60年代的欧洲，书友将自己不再阅读的图书贴上特定标签，投放到公园、茶馆、商场等公共场所，其他人便可“偶遇”自己感兴趣的书，
					拾取的人阅读之后，根据标签提示，再以相同的方式将该书投放到公共环境中去。同时拾取图书的人有义务在阅读完毕后将自己的感受以日志、趣闻、阅读笔记等形式记录下来。</p>
				<p>这种好书共享方式，让“知识因传播而美丽”。如今，图书漂流的方式已不局限于投放户外一种，越来越多富有想象力的书友在投漂图书时，在投漂说明中设定了自己的漂流规则，使图书的漂流过程变得更加丰富多彩。</p>
				<h6>互联网漂书</h6>
				<p>如今在互联网上，“漂书”逐渐成为一种时尚。在一家将全世界纳为漂流对象的网站上可以看到，几乎每天都有书友发帖询问图书的“漂向”，此外，热心的书友也会随时将手头欲“漂”的书本信息进行发布，以供他人索取。</p>
				<h6>我们的漂书活动</h6>
				<p>我们的漂书活动是由Google赞助，上海大学开源社区负责管理的。所漂书籍为技术开发类书籍（剩余内容待定）</p>
				<br class="clear" />
			</div>
			<hr />
			<div class="column2">
				<h2>怎样参与漂书活动</h2>
				<img class="imgl" src="images/number/2.jpg" alt="" />
				<div class="col2box">
					<h6>1.注册成为我们的用户</h6>
					<p>
						首先，您需要注册成为我们的用户，只有提供了您的联系方式以后，才能参与漂书。<a href="#">
							现在就去注册&raquo;</a>
					</p>
				</div>
				<div class="col2box">
					<h6>2.选择想借阅的书籍</h6>
				</div>
				<div class="col2box">
					<h6>3.阅读完后归还书籍</h6>
				</div>
				<br class="clear" />
			</div>
			<hr />
			<div class="column2">
				<h2>漂书活动的注意事项</h2>
				<img class="imgl" src="images/number/3.jpg" alt="" />
				<h6>如果想要继续借阅</h6>
				<p>没人等着随意，有人等着没门。（待修改）</p>
				<h6>书弄丢了怎么办</h6>
				<p>一个字：赔。（待修改）</p>
				<h6>其他奇怪的问题</h6>
				<p>本内容需回复后可见。</p>
				<br class="clear" />
			</div>
			<hr />
			<div class="column2">
				<h2>去他喵的排版！</h2>
				<img class="imgl" src="images/number/4.jpg" alt="" />
				<h6>去他喵的排版！</h6>
				<p>去他喵的排版！去他喵的排版！去他喵的排版！去他喵的排版！去他喵的排版！去他喵的排版！去他喵的排版！去他喵的排版！去他喵的排版！去他喵的排版！去他喵的排版！去他喵的排版！去他喵的排版！去他喵的排版！去他喵的排版！去他喵的排版！去他喵的排版！</p>
				<h6>去他喵的排版！</h6>
				<p>去他喵的排版！去他喵的排版！去他喵的排版！去他喵的排版！去他喵的排版！去他喵的排版！去他喵的排版！去他喵的排版！去他喵的排版！去他喵的排版！去他喵的排版！去他喵的排版！去他喵的排版！</p>
				<h6>去他喵的排版！</h6>
				<p>去他喵的排版！去他喵的排版！去他喵的排版！去他喵的排版！去他喵的排版！去他喵的排版！去他喵的排版！去他喵的排版！去他喵的排版！去他喵的排版！去他喵的排版！去他喵的排版！去他喵的排版！去他喵的排版！</p>
				<br class="clear" />
			</div>
		</div>
	</div>
	<!-- ####################################################################################################### -->
	<div class="wrapper col4">
		<div id="footer">
			<div class="footbox">
				<h2>上海大学友情链接</h2>
				<ul>
					<li><a href="#">开源社区主页</a></li>
					<li><a href="#">首页</a></li>
					<li><a href="#">教务处</a></li>
					<li><a href="#">计算机学院</a></li>
					<li class="last"><a href="#">信息办</a></li>
				</ul>
			</div>
			<div class="footbox">
				<h2>复旦大学友情链接</h2>
				<ul>
					<li><a href="#">开源社区主页</a></li>
					<li><a href="#">首页</a></li>
					<li><a href="#">教务处</a></li>
					<li><a href="#">计算机学院</a></li>
					<li class="last"><a href="#">信息办</a></li>
				</ul>
			</div>
			<div class="footbox">
				<h2>上海人民发来贺电</h2>
				<ul>
					<li><a href="#">我</a></li>
					<li><a href="#">实在</a></li>
					<li><a href="#">编不出了</a></li>
					<li><a href="#">以后再编</a></li>
					<li class="last"><a href="#">就这样吧</a></li>
				</ul>
			</div>
			<div class="footbox last">
				<h2>去他喵的友情链接</h2>
				<ul>
					<li><a href="#">别再跟爹提友情链接了</a></li>
					<li><a href="#">别再跟爹提友情链接了</a></li>
					<li><a href="#">别再跟爹提友情链接了</a></li>
					<li><a href="#">别再跟爹提友情链接了</a></li>
					<li><a href="#">别再跟爹提友情链接了</a></li>
					<li class="last"><a href="#">别再跟爹提友情链接了</a></li>
				</ul>
			</div>
			<br class="clear" />
		</div>
	</div>
	<!-- ####################################################################################################### -->
	<div class="wrapper col5">
		<div id="copyright">
			<p class="fl_left">
				Copyright &copy; 2012 - All Rights Reserved - <a href="#">Shanghai
					University Opensource Community</a>
			</p>
			<br class="clear" />
		</div>
	</div>
</body>
</html>